<script setup lang="ts">
defineProps<{
	fontSize:string
}>()

import { watch } from 'vue';
import { computed, ref,onMounted ,h } from 'vue';
import dayjs from 'dayjs';
import WindowsIcon from './WindowsIcon.vue';
import SystemDeskopItem from './SystemDeskopItem.vue';
import IconMyComputer from './icons/IconMyComputer.vue';
import IconDir from './icons/IconDir.vue';
import IconChrome from './icons/IconChrome.vue';
import IconNotepad from './icons/IconNotepad.vue';

import NotepadContent from './app/NotepadContent.vue';
import BrowserContent from './app/BrowserContent.vue';
import popMenu from './PopMenu.vue';

const iconNotepad=ref({});
const notepadContent =ref({});

const iconMyComputer=ref({});
const iconDir=ref({});
const iconChrome=ref({});
const browserContent=ref({});

const nowTime = ref(dayjs());
onMounted(() => {
	iconNotepad.value=h(IconNotepad, {});
	notepadContent.value=h(NotepadContent, {});
	iconMyComputer.value=h(IconMyComputer, {});
	iconDir.value=h(IconDir, {});
	iconChrome.value=h(IconChrome, {});
	browserContent.value=h(BrowserContent, {});
});

function click(source: string){
	console.log('click'+source)
}

</script>

<template>
  		<div class="system-desktop" :style="{fontSize: fontSize}">			
			<!-- <window :icon="IconChrome" title="Chrome" :width="600" :height="300" :x="100" :y="100"/> -->			
			<div class="desktop">
				<popMenu/>
				<div class="content">					
					<div class="itemlist">
						<!-- <SystemDeskopItem :icon="h(IconMyComputer, {fontSize: '0.5em'})" iconSrc="" title="此电脑" source="http://www.baidu.com"/>						
						<SystemDeskopItem iconSrc="https://vscode.dev/static/stable/favicon.ico" title="vs code" source="https://vscode.dev/?vscode-lang=zh-cn" />
						<SystemDeskopItem :icon="h(IconDir, {})" iconSrc="" title="新建文件夹（1）" @click="click"/>		
						<SystemDeskopItem :icon="h(IconChrome, {})" iconSrc="" title="chrome" :content="h(browserContent, {})"/>
						<SystemDeskopItem :icon="iconNotepad" iconSrc="" title="记事本" :content="notepadContent"/> -->
						<SystemDeskopItem :icon="iconMyComputer" iconSrc="" title="此电脑" source="http://www.baidu.com"/>
						<SystemDeskopItem :icon="iconDir" iconSrc="" title="新建文件夹（1）" @click="click"/>		
						<SystemDeskopItem :icon="iconChrome" iconSrc="" title="chrome" :content="browserContent"/>
						<SystemDeskopItem :icon="iconNotepad" iconSrc="" title="记事本" :content="notepadContent"/>
					</div>
				</div>
				<div class="taskbar">
					<div class="startbutton">
						<WindowsIcon direction="center" />
					</div>
					<div class="taskbarbuttons"></div>
					<div class="time">
						<div>{{ nowTime.format('HH:mm')}}</div>
						<div>{{ nowTime.format('YYYY-MM-DD')}}</div>
					</div>
					<div class="desktop-button"></div>
				</div>
			</div>
		</div>
</template>

<style scoped>
    	
		.system-desktop{
			width: 100%;
			height: 100%;
			background-color: #000;	
			position: relative;
			overflow: hidden;	
			
		}
		.system-desktop .desktop{
			width: 100%;
			height: 100%;
			background-color: #000;
			display: flex;
			flex-direction: column;
		}
		
		.system-desktop .desktop .content{
			/* background-color: rgb(80, 146, 158); */
			/* background-color: white; */
			flex: 1;
		}
		.system-desktop .desktop .content .itemlist{
			width: 100%;
			height: 100%;
			display: grid;
			justify-content: start;
			justify-items: start;
			align-content: start;
			align-items: start;
		}
		.system-desktop .desktop .taskbar{
			width: 100%;
			height: 3em;
			bottom: 0;
			display: flex;
			flex-direction: row;
			background-color: #ffffff60;
			color: #fff;
			border: 0.1em solid #555;
		}
		.system-desktop .desktop .taskbar .startbutton{
			width: 3em;
			height: 3em;
			/* background-color: #fff; */
			transform:  scale(0.5);
			/* padding:1rem; */
		}
		.system-desktop .desktop .taskbar .taskbarbuttons{
			flex: 1;
		}
		.system-desktop .desktop .taskbar .time{
			width: 10em;
			height: 3em;
			font-size: 0.6em;
			/* background-color: #fff; */
			/* display: flex;
			align-items: center;
			justify-content: center */
			text-align: right;
		}
		.system-desktop .desktop .taskbar .time div:first-child{
			margin: 0.5em 0 0 0;
		}
		.system-desktop .desktop .taskbar .desktop-button{
			width: 1em;
			height: 3em;
			/* background-color: #fff; */
		}
		.system-desktop .desktop .taskbar .desktop-button:hover{
			background-color: #292828;
		}
</style>